<template>
    <div class="order-tab">
        <nut-tabs v-model="tab" title-scroll title-gutter="10" name="tab" @click="changeTab">
            <nut-tab-pane v-for="(item, index) in tabList" :title="item.title" :pane-key="item.key">
                <div class="order-list" v-if="tab == item.key">
                    <div class="order-item" v-for="(item, index) in orderList" :key="item.id"
                        v-if="orderList.length > 0"
                        @click="jumpTo(item.orderStatus, '/packageA/pages/orderDetail/index?orderNo=' + item.orderNo + '&orderStatus=' + item.orderStatus)">
                        <div class="order-head flex-a flex-b">
                            <div>订单编号：{{ item.orderNo }}</div>
                            <div>{{ item.orderStatus < 0 ? '已取消' : item.orderStatus == 0 ? '未支付' : item.orderStatus == 1
            ? '已支付' : item.orderStatus == 3 ? '待支付' : item.orderStatus == 4 ? '已完成' : '退货' }}</div>
                            </div>
                            <div class="flex order-content" v-for="ele in item.newBeeMallOrderItemVOS"
                                :key="ele.goodsId">
                                <div class="left">
                                    <img :src="ele.goodsCoverImg" alt="">
                                </div>
                                <div class="middle">
                                    <div>{{ ele.goodsName }}</div>
                                    <div>{{ item.info }}</div>
                                    <div>{{ ele.specName }}</div>
                                </div>
                                <div class="right">
                                    <div>￥{{ ele.sellingPrice + '' }}</div>
                                    <div>x{{ ele.goodsCount }}</div>
                                </div>
                            </div>
                            <div class="order-foot">
                                <div class="total">共1件商品 <text>合计：￥{{ item.totalPrice }}</text></div>
                                <div class="check-order flex-a">
                                    <!-- <div v-if="item.orderStatus == 1" class="no">
                                    <text>德邦快递: {{ text }}</text>
                                    <img @click.stop="copy(text)" src="https://s1.ax1x.com/2023/07/11/pCWkHPg.png" alt="">
                                </div> -->
                                    <nut-button type="default"
                                        v-if="item.orderStatus == 1 || item.orderStatus == 2 || item.orderStatus == 3"
                                        @click.stop="checkOrder(item, index)">查看物流</nut-button>
                                    <nut-button type="default" v-if="item.orderStatus == 0"
                                        @click.stop="resetOrder(item, index)">取消订单</nut-button>
                                    <nut-button type="default" v-if="item.orderStatus == 3"
                                        @click.stop="confirmOrder(item, index)">确认收货</nut-button>
                                    <nut-button type="default" @click.stop="delOrder(item, index)"
                                        v-if="item.orderStatus == -1">删除订单</nut-button>
                                    <nut-button type="info" v-if="item.orderStatus == 0"
                                        @click.stop="jumpTo('', '/packageA/pages/confirmPay/index?addressId=' + item.addressId + '&orderId=' + item.orderNo)">去支付</nut-button>
                                    <nut-button type="default" v-if="item.refStatus == 2"
                                        @click.stop="editNo(item)">填写快递单号</nut-button>
                                </div>
                            </div>
                        </div>
                        <nut-empty v-else description="无数据"></nut-empty>
                    </div>
            </nut-tab-pane>
        </nut-tabs>
        <nut-popup position="bottom" closeable round :style="{ height: '20%' }" v-model:visible="showBottom"
            class="tknum">
            <nut-form>
                <nut-form-item label="快递单号">
                    <nut-input v-model="tkNum" class="nut-input-text" placeholder="请输入快递单号" type="text" />
                </nut-form-item>
                <div class="btn"><nut-button type="info" size="small" @click="submit">提交</nut-button></div>
            </nut-form>
        </nut-popup>
    </div>
</template>

<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro';
import { useReachBottom } from '@tarojs/taro';
import { requirePlugin } from '@tarojs/taro';
// import mitt from "../../../utils/mitt";
import { Left } from '@nutui/icons-vue-taro';
import { reactive, toRefs, onMounted } from 'vue';
import { getOrderLists } from '../../../../api/index'
export default {
    components: {
        Left,
    },
    setup() {
        // const myPluginInterface = requirePlugin('logisticsPlugin')
        const data = reactive({
            waybillToken: '',
            tab: 0 as any,
            orderList: [] as any[],
            tabList: [
                {
                    title: '全部',
                    key: 0,
                },
                {
                    title: '待接单',
                    key: 1,
                },
                {
                    title: '待服务',
                    key: 2,
                },
                {
                    title: '服务中',
                    key: 3,
                },
                {
                    title: '已完成',
                    key: 4
                },
                {
                    title: '待评价',
                    key: 5
                },
            ],
            pageNumber: 1,
            text: 'DPK364116621912',
            showBottom: false,
            refOrderNo: '',
            tkNum: '',
            token: '',
            user: {}
        });

        onMounted(() => {
            const router = useRouter();
            // if (router.params.tab) {
            //     data.tab = router.params.tab
            //     getOrder(router.params.tab)
            // }
            Taro.getStorage({
                key: 'user',
                success: function (res) {
                    data.user = res.data ? res.data : {}
                    console.log(data.user.uuid)
                    getOrder()
                }
            })
        })
        const changeTab = (title) => {
            data.tab = title.paneKey
            data.pageNumber = 1
            data.orderList = []
            getOrder(title.paneKey)
        }
        const getOrder = () => {
            getOrderLists({ user_ID: data.user.uuid }).then(res => {
                if (res.code == 0) {
                    res.data.list.forEach(item => {
                        data.orderList.push(item)
                    });
                }
            })
        }
        const jumpTo = (status, path) => {
            if (status != 6) {
                Taro.navigateTo({ url: path });
            }
        }
        useReachBottom(() => {
            //console.log('onReachBottom')
            data.pageNumber++
            getOrder(data.tab)
        })
        const resetOrder = (item, index) => {
            cancelOrder(item.orderNo).then(res => {
                if (res.resultCode == 200) {
                    Taro.showToast({
                        title: '取消成功',
                        icon: 'success',
                        duration: 2000
                    })
                    data.orderList[index].orderStatusString = '手动关闭'
                    data.orderList[index].orderStatus = -1
                }
            })
        }
        const confirmOrder = (item, index) => {
            finishOrder(item.orderNo).then(res => {
                if (res.resultCode == 200) {
                    Taro.showToast({
                        title: '收货成功',
                        icon: 'success',
                        duration: 2000
                    })
                    data.orderList[index].orderStatusString = '已完成'
                    data.orderList[index].orderStatus = 4
                }
            })
        }
        const delOrder = (item, index) => {
            removeOrder(item.orderId).then(res => {
                if (res.resultCode == 200) {
                    Taro.showToast({
                        title: '删除成功',
                        icon: 'success',
                        duration: 2000
                    })
                    data.orderList.splice(index, 1)
                }
            })
        }
        const copy = (text: string) => {
            Taro.setClipboardData({
                data: text,
            }).then(() => {
                Taro.showToast({
                    title: '已复制到剪切板',
                    icon: 'none'
                })
            })
        }
        const editNo = (item) => {
            data.refOrderNo = item.refOrderNo
            data.showBottom = true
        }
        const submit = () => {
            subTknum(data.refOrderNo, data.tkNum).then(res => {
                if (res.resultCode == 200) {
                    Taro.showToast({
                        title: '提交成功',
                        icon: 'success',
                        duration: 2000
                    })
                    data.showBottom = false
                    getOrder(data.tab)
                }
            })
        }
        const checkOrder = (item, index) => {
            getWaybillToken(item.orderNo).then(res => {
                if (res.resultCode == 200) {
                    data.token = res.message
                    // myPluginInterface.openWaybillTracking({
                    //     waybillToken: res.message
                    // });
                }
            })
        }
        return {
            ...toRefs(data), changeTab, jumpTo, getOrder, copy, resetOrder, confirmOrder, delOrder, editNo, submit, checkOrder
        }
    }
};
</script>
<style lang="scss">
.order-tab {

    .nut-tab-pane {
        padding: 0;
    }

    .order-list {
        padding: 20rpx 15rpx 50rpx 15rpx;
        background: #E9E9E9;
        min-height: 100vh;

        .order-item {
            margin-bottom: 10rpx;
            background: #fff;
            border-radius: 10rpx;
            box-sizing: border-box;
            padding: 0 30rpx;

            .order-head {
                border-bottom: 1rpx solid #F2F2F2;
                padding: 20rpx 0;
                color: #9E9090;
                font-size: 32rpx;

                div:last-child {
                    font-size: 26rpx;
                }
            }

            .order-content {
                padding: 30rpx 0 10rpx;
                border-bottom: 1rpx solid #F2F2F2;

                .left {
                    img {
                        width: 200rpx;
                        height: 200rpx;
                    }

                    margin-right: 20rpx;
                }

                .middle {
                    width: 60%;

                    div:first-child {
                        font-size: 30rpx;
                        margin-bottom: 20rpx;
                    }

                    div:last-child {
                        color: #6B7283;
                        font-size: 24rpx;
                    }
                }

                .right {
                    text-align: right;

                    div:first-child {
                        font-size: 34rpx;
                        font-weight: bold;
                        margin-bottom: 20rpx;
                        white-space: nowrap;
                    }

                    div:last-child {
                        color: #6B7283;
                    }
                }
            }

            .order-foot {
                .total {
                    text-align: right;
                    padding: 30rpx 0;

                    text {
                        margin-left: 30rpx;
                    }
                }

                .check-order {
                    text-align: right;
                    padding-bottom: 20rpx;
                    justify-content: flex-end;

                    .no {
                        white-space: nowrap;
                        width: 60%;

                        text {
                            display: inline-block;
                            width: 90%;
                            color: #999;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }

                        img {
                            width: 40rpx;
                            height: 40rpx;
                        }
                    }

                    .nut-button {
                        border-radius: 10rpx;
                        margin-left: 10rpx;
                    }
                }
            }

        }
    }
}

.tknum {
    .nut-popup {
        padding-top: 80rpx;
    }

    .btn {
        text-align: center;

        .nut-button {
            width: 60%;
            margin: 20rpx auto;
        }
    }
}
</style>